<template>
  <views class="password_amend">
    <div class="character_name flex flexR">
      <div class="character_name_title">原密码:</div>
      <div class="character_name_input">
        <el-input v-model="old_password" placeholder="请输入原密码" :clearable="true"></el-input>
      </div>
    </div>
    <div class="character_name flex flexR">
      <div class="character_name_title">新密码:</div>
      <div class="character_name_input">
        <el-input v-model="new_password" placeholder="请输入新密码" :clearable="true"></el-input>
      </div>
    </div>
    <div class="character_name flex flexR">
      <div class="character_name_title">重复密码:</div>
      <div class="character_name_input">
        <el-input v-model="check_new_password" placeholder="请输入密码" :clearable="true"></el-input>
      </div>
    </div>
    <div class="btn_list flex flexR">
      <el-button type="primary" @click="submitPassword">提交</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
      <!-- <el-button type @click="get_back">返回</el-button> -->
    </div>
  </views>
</template>


<script>
export default {
  name: "SafetyMakePassword",
  data() {
    return {
      old_password: "",
      new_password: "",
      check_new_password: "",
      flag: true
    };
  },
  computed: {
    post_data() {
      let post = {};
      if (this.old_password == "") {
        this.flag = false;
        this.$message.error("原密码不能为空");
      }
      if (this.new_password == "") {
        this.flag = false;
        this.$message.error("新密码不能为空");
      }
      if (this.check_new_password == "") {
        this.flag = false;
        this.$message.error("确认密码不能为空");
      }
      if (this.new_password != this.check_new_password) {
        this.flag = false;
        this.$message.error("确认密码不正确");
      }
      post.old_password = this.old_password;
      post.new_password = this.new_password;
      return post;
    }
  },
  methods: {
    reset() {
      //重置
      this.old_password = "";
      this.new_password = "";
      this.check_new_password = "";
    },
    submitPassword() {
      let data = this.post_data;
      if (!this.flag) return;
      this.$raxios
        .post(this.$mapapi.modifyPassword, { data })
        .then(res => {
          if (res.code != 200) return Promise.reject(res.msg);
          this.$message.success(res.msg);
          this.old_password = "";
          this.new_password = "";
          this.check_new_password = "";
          this.$toRoutePath({
            path: "/success",
            edit: true,
            query: {}
          });
        })
        .catch(res => {
          this.$message.error(res);
        });
    }
  }
};
</script>

<style scoped lang="less">
.password_amend {
  padding: 10px 10px 20px 10px;
  background: #ffffff;
  .btn_list {
    margin-top: 25px;
    margin-left: 55px;
    width: 250px;
    justify-content: space-around;
  }
  .character_name {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_input {
      margin-left: 15px;
      width: 100%;
    }
    .character_name_title {
      width: 130px;
      text-align: left;
    }
    .character_name_title:before {
      content: "*";
      color: red;
    }
  }
}
</style>